import { useState, useEffect, useContext } from 'react';
import { NavBar, Space, List, Switch } from "antd-mobile";
import { useHistory, useRouteMatch } from "react-router-dom";

import AvatarImage from '../../../components/AvatarImage';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const { params: { cid } } = useRouteMatch();
  const [groups, setGroups] = useState({ topModeId: 0, shieldMode: 0 });
  const [conversationDetail, setConversationDetail] = useState({});

  // 查询回话基本信息
  useEffect(async () => {
    const info = await mySdkStore.sdk.querySingleConversation({ cid });
    setConversationDetail(info);
  }, []);

  // 查询 置顶组、免打扰组的groupId，以处理开关
  useEffect(async () => {
    const group = await mySdkStore.sdk.queryConversationGroups();
    const topModeId = group.find(item => item.groupName.indexOf('置顶') > -1)?.id;
    const shieldModeId = group.find(item => item.groupName.indexOf('免打扰') > -1)?.id;
    setGroups({ topModeId, shieldModeId });
  }, []);

  // 处理置顶模式、免打扰模式 开关
  const handleModeChange = async (groupId, modeName) => {
    if (!groupId) {
      return;
    }

    const api = conversationDetail[modeName] ? 'removeConversationFromGroups' : 'addConversationToGroups';
    await mySdkStore.sdk[api]({ cid, groupId });
    setConversationDetail({ ...conversationDetail, [modeName]: !conversationDetail[modeName] });
  }

  return (<div className="chatDetailSettingPage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>聊天设置</NavBar>
      <div className="userInfo">
        <Space>
          <div className="avaterCard">
          <AvatarImage
            src={conversationDetail.subAvatarUrl}
            nickName={conversationDetail.nickName}
            userName={conversationDetail.userName}
            userId={conversationDetail.userId}
            style={{ marginBottom: 8, borderRadius: 8 }} fit='cover' width={42} height={42} />
            { conversationDetail.nickName || conversationDetail.userName }
          </div>
          {/* <div className="addBtn">
            <AddOutline />
          </div> */}
        </Space>
      </div>
      <List style={{ marginBottom: 12 }}>
        <List.Item onClick={() => history.push({ pathname: `/searchMessageContent/${cid}` })}>
          查找聊天内容
        </List.Item>
      </List>
      <List style={{ marginBottom: 12 }}>
        <List.Item extra={<Switch checked={conversationDetail.topMode} onChange={() => handleModeChange(groups.topModeId, 'topMode')} />}>
          置顶聊天
        </List.Item>
        <List.Item extra={<Switch checked={conversationDetail.shieldMode} onChange={() => handleModeChange(groups.shieldModeId, 'shieldMode')} />}>
          消息免打扰
        </List.Item>
      </List>
      {/* todo: 没有清空聊天记录Api */}
      {/* <div className="buttonBar" style={{ color: '#E02020', textAlign: 'center'}} onClick={handleClearChatHistory}>清空聊天记录</div> */}
      {/* todo: 没有密聊相关Api */}
      {/* <div className="buttonBar"><a>进入密聊</a></div> */}
    </div>
  )
}